/*
 * @Author: AskMeWhy
 * @Date: 2020-10-13 15:29:06
 * @Last Modified by: AskMeWhy
 * @Last Modified time: 2021-02-03 14:24:00
 */

import {
    Vue,
    Component,
    Inject,
    Prop,
    Watch,
    Ref
} from "vue-property-decorator";
import AskCityPanel from "./index.vue";

@Component({
    components: {
        AskCityPanel
    }
})
export default class PanelMixins extends Vue {
    @Inject("main") readonly main!: any;

    // 当前选中值
    @Prop({
        type: String,
        default: ""
    })
    readonly value!: string;

    // 开启之后增加选择暂不选择的选项
    @Prop({
        type: Boolean,
        default: false
    })
    readonly showNot!: boolean;

    // 当前列表是否在展示
    @Prop({
        type: Boolean,
        default: false
    })
    readonly show!: boolean;

    // 当前列表是否禁用
    @Prop({
        type: Boolean,
        default: false
    })
    readonly disabled!: boolean;

    // 当前列表是否禁用
    @Prop({
        type: Function,
        default: () => true
    })
    readonly beforeClick!: any;

    get cityList() {
        return this.$store.state.cityList;
    }

    @Watch("show")
    onShowChange() {
        const _index = this.list.findIndex(cur => cur.name === "暂不选择");
        // console.log(this.showNot, _index, this.cityCode);
        if (this.showNot && _index === -1 && this.cityCode) {
            this.list.unshift({
                code: this.cityCode,
                name: "暂不选择",
                class: "red"
            });
            this.calcPosition();
        }
        if (!this.showNot && _index !== -1 && this.cityCode) {
            this.list.splice(_index, 1);
            this.calcPosition();
        }
    }

    ajaxLoader = false;
    ajaxIndex = 0;
    cityCode = "";
    list: any[] = [];

    sourceList: any[] = [];

    loader(state: any) {
        if (state) {
            if (this.ajaxIndex === 0) this.ajaxLoader = true;
            this.ajaxIndex++;
        } else {
            setTimeout(() => {
                this.ajaxIndex--;
                if (this.ajaxIndex === 0) this.ajaxLoader = false;
            }, 300);
        }
    }

    @Ref() readonly askCityPanelRef!: AskCityPanel | any;

    calcPosition() {
        this.askCityPanelRef.calcPosition();
    }

    resetState() {
        this.askCityPanelRef.resetState();
    }

    key2NameCustom(data: any, _value: any) {
        const traverseNodeList = (list: any, value: any) => {
            let resObj: any = this.$key2Name(
                {
                    type: value,
                    list: list,
                    key: "code"
                },
                "obj"
            );
            if (resObj.code) return resObj;
            for (let i = 0; i < list.length; i++) {
                const cur = list[i];
                resObj = traverseNodeList(cur.children || [], value);
                if (resObj.code) {
                    break;
                }
            }
            return resObj;
        };
        return traverseNodeList(data, _value);
    }

    async getDataList() {
        // if (this.main.cityQuery === "auth") {
        //     if (this.cityList.length === 0) {
        //         await this.$store.dispatch("getAuthCityList");
        //     }
        //     // console.log(
        //     //     this.cityList,
        //     //     this.cityCode,
        //     //     this.$options.name,
        //     //     this.key2NameCustom(this.cityList, this.cityCode)
        //     // );
        //     if (this.$options.name === "ProvincePanel") {
        //         return this.cityList;
        //     }
        //     const res = this.key2NameCustom(this.cityList, this.cityCode);
        //     return res.children || [];
        // }
        let url = "";
        if (this.main.cityQuery === "auth") {
            url = "cityQueryAuth";
        } else if (this.main.cityQuery === "authArea") {
            url = "cityQueryAuthArea";
        } else {
            url = "cityQuery";
        }
        const response = await this.$server[url]({
            loader: false,
            data: {
                code: this.cityCode || ""
            }
        });
        return response.data.data;
    }

    async initData(cityCode: any) {
        if (!cityCode) {
            return;
        }
        if (this.list.length !== 0 && cityCode === this.cityCode) {
            this.calcPosition();
            const _index = this.list.findIndex(cur => cur.code === this.value);
            return this.list[_index];
        }
        this.cityCode = cityCode;
        this.loader(true);
        try {
            const response = await this.getDataList();
            this.loader(false);
            this.list = response.map((cur: any) => {
                this.sourceList.push(cur);
                return {
                    name: cur.name,
                    code: cur.code + ""
                };
            });
            if (this.showNot) {
                this.list.unshift({
                    code: this.cityCode,
                    name: "暂不选择",
                    class: "red"
                });
            } else if (this.list.length === 0) {
                this.list.unshift({
                    code: "-404",
                    name: "暂无数据",
                    class: "red"
                });
            }
            const _index = this.list.findIndex(cur => cur.code === this.value);
            // if (_index !== -1) {
            //     this.$refs.askCityPanelRef.setActiveNode(this.list[_index]);
            // }
            return this.list[_index];
        } catch (error) {
            if (error.cancel) {
                return;
            }
            this.loader(false);
            this.$message.error(error.message || "接口请求错误!");
            throw error;
        }
    }
}
